import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  DatasetComponent,
  LegendComponent,
  TooltipComponent,
  GridComponent,
  DataZoomSliderComponent,
} from 'echarts/components';
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';

echarts.use([
  GridComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  DataZoomSliderComponent,
]);
import { commonOptions } from '@/app/components/echarts/commonOption';

type SeriesData = {
  name: string;
  data: number[];
  labelColor: string;
};

const formatNumber = (value: number) => {
  if (value >= 1000000) {
    return (Math.round((Number(value) / 1000000) * 10) / 10).toLocaleString() + 'M';
  } else if (value >= 1000) {
    return Math.round(Number(value) / 1000).toLocaleString() + 'K';
  }
  return value.toLocaleString();
};

export default function SeawatLineChart(props: {
  slider?: boolean;
  boxStyle?: React.CSSProperties;
  dataset: {
    seriesData: SeriesData[];
    yAxis: string;
  };
}) {
  const { dataset } = props;
  const options = {
    yAxis: {
      type: 'category',
      onZero: false,
      data: dataset.yAxis,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: 'rgba(255,255,255,0.4)',
        fonSize: 12,
      },
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#474A68',
          width: 1,
          // dashOffset: 50
        },
      },
      axisLabel: {
        color: 'rgba(255,255,255,0.4)',
        fonSize: 12,
        formatter: function (value: string) {
          return formatNumber(Number(value));
        },
      },
    },
    barGap: 0,
    color: ['#47B0FA'],
    legend: {
      icon: 'rect',
      right: 0,
      itemWidth: 14,
      itemHeight: 2,
      textStyle: {
        color: 'rgba(223,242,255,0.6)',
        fontSize: 14,
      },
    },
    series: dataset?.seriesData.map((i) => {
      return {
        type: 'bar',
        data: i.data,
        name: i.name,
        // symbol: 'none',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(137,208,255,0.5)' },
            { offset: 1, color: '#88D0FF' },
          ]),
        },
        label: {
          show: true,
          position: 'right',
          color: '#D8D8D8',
          fontSize: 12,
          fontWeight: 'bold',
          hideOverlap: true,
          distance: 3,
          formatter({ value }: { value: number }) {
            return formatNumber(Number(value));
          },
        },
        labelLayout: {
          hideOverlap: true,
        },
      };
    }),
    grid: {
      // containLabel: true,
      left: 95,
      right: 50,
      top: 40,
      bottom: 28,
    },
  };
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height: '100%',
        flexGrow: 1,
        ...props.boxStyle,
      }}
    >
      <ReactEChartsCore
        echarts={echarts}
        option={options}
        notMerge={true}
        lazyUpdate={true}
        style={{
          width: '100%',
          height: '100%',
        }}
      />
    </div>
  );
}
